import '../../css/node.css';
import __DB__               from '../db/index.js';
import __formate__          from '../formate/index.js';
import __tool__             from '../tool/index.js';
import __canvas__           from '../canvas/index.js';
import __cntMenu__          from '../cntMenu/index.js';
import __customEvent__      from '../customEvent/index.js';
import __drag__             from '../drag/index.js';
import __automatic__        from '../line/automatic.js';

class nodeClass {
    constructor(){
        
    }

    // 初始化
    init(){
        this.evt();
    }

    // 添加节点
    add(res){
        __DB__.set(res.id,res);
        __DB__.reset();// 重新渲染

        return true;
    }

    // 删除节点
    del(id){
        // 删除子节点
        let ids = __tool__.deepCopy(__DB__.nodesManyIds[id]);
        for(let el of ids){
            __DB__.del(el);
        }

        __DB__.del(id);// 删除此节点
        __DB__.reset();// 重新渲染

        return true;
    }

    // 节点显示/隐藏加载中
    loading(res){
        let id      = res.id,
            type    = res.type;

        let nodeEl = document.getElementById(id);

        if(type){
            nodeEl.classList.remove('xmd-node-loading-hide');
            nodeEl.classList.add('xmd-node-loading-show');
        }
        else{
            nodeEl.classList.remove('xmd-node-loading-show');
            nodeEl.classList.add('xmd-node-loading-hide');
        }
    }

    // 设置多选
    setNodeCheckeds(items){
        if(items.length === 0){
            __DB__.nodeCheckbox.items = [];
            let nodeEls = __canvas__.getNodeEls();
            for(let el of nodeEls){
                let cls_el = el.getAttribute('class');
                if(cls_el.indexOf('active') > -1){
                    el.classList.remove('xmd-node-active');
                }
            }
            __DB__.nodeCheck = '';
        }
        else{
            __DB__.nodeCheckbox.items = __tool__.deepCopy(items);
            let nodeEls = __canvas__.getNodeEls();
            for(let el of nodeEls){
                let id_el = el.getAttribute('id');
                let sign = items.filter(e => {
                    return e === id_el;
                });
                if(sign.length > 0){
                    let cls_el = el.getAttribute('class');
                    if(cls_el.indexOf('active') > -1){
                        el.classList.remove('xmd-node-active');
                    }
                    el.classList.add('xmd-node-active');
                }
            }
        }
        
    }

    // 获取多选
    getNodeCheckeds(){
        return __DB__.nodeCheckbox.items;
    }

    // 事件管理
    evt(){
        let nodeEls = __canvas__.getNodeEls();
        
        for(let el of nodeEls){
            el.onmousedown = (e)=>{
                e.stopPropagation();
                e.preventDefault();
                
            }

            el.onclick = e=>{
                e.stopPropagation();
                e.preventDefault(); 

                let id = el.getAttribute('id');

                if(__DB__.nodeCheckbox.is){
                    let items = __DB__.nodeCheckbox.items;
                    el.classList.toggle("xmd-node-active");

                    if(!items.includes(id)){
                        items.push(id);
                    }
                    else{
                        items = items.filter(item=>{
                            return item != id;
                        })
                    }

                    __DB__.nodeCheckbox.items = items;

                    // 绑定自定义事件
                    __customEvent__.set({
                        type:"nodeCheckbox",
                        data:{
                            id,
                            items:items
                        }
                    });
                }
                else{
                    // __DB__.nodeCheckbox.items = [];
                    __DB__.nodeCheckbox.items = [id];
                    for(let el of nodeEls){
                        let cls_el = el.getAttribute('class');
                        if(cls_el.indexOf('active') > -1){
                            el.classList.remove('xmd-node-active');
                        }
                    }
                    el.classList.add("xmd-node-active");
                    __DB__.nodeCheck = id;

                    __customEvent__.set({
                        type:"nodeClick",
                        data:{
                            id,
                        }
                    })
                }

                
                // // 绑定自定义事件
                // __customEvent__.set({
                //     type:"nodeClick",
                //     data:{
                //         id
                //     }
                // });
            }

            el.oncontextmenu = (e)=>{
                e.stopPropagation();
                e.preventDefault();

                let id = el.getAttribute('id'),
                    nodeData = __DB__.get(id),
                    label = nodeData.label;

                __cntMenu__.x = e.clientX;
                __cntMenu__.y = e.clientY;

                __customEvent__.set({
                    type:"cntMenuNode",
                    data:{
                        id,label,
                        nodeCheckbox:__DB__.nodeCheckbox.items
                    }
                })

                __cntMenu__.init({
                    type:"node",
                    data:{
                        id,label
                    },
                    e,
                    x:e.clientX,
                    y:e.clientY,
                });
            }
            el.onmouseover = (e)=>{
                let id = el.getAttribute('id');
                // 绑定自定义事件
                __customEvent__.set({
                    type:"nodeMouseOver",
                    data:{
                        id
                    }
                });
            }
            el.onmouseout = (e)=>{
                let id = el.getAttribute('id');
                // 绑定自定义事件
                __customEvent__.set({
                    type:"nodeMouseOut",
                    data:{
                        id
                    }
                });
            }
        }

        const nodeOpts = document.querySelectorAll(".xmd-node-opt");
        for(let el of nodeOpts){
            let parentNode = el.parentNode;
            let id = parentNode.getAttribute('id');

            el.onmousedown = e=>{
                e.stopPropagation();
                e.preventDefault();

                if(e.button == 2)return;// 过滤右键

                if(__automatic__.isDraw){
                    fn_automatic.call(this,id);
                }

                let nodeCheckboxItems = __DB__.nodeCheckbox.items;
                let otherIds = [];
                if(nodeCheckboxItems.length > 1){
                    otherIds = nodeCheckboxItems.filter(el=>{
                        return el != id;
                    });
                }

                if(__DB__.edit){
                    // __drag__.start({
                    //     parentNode,
                    //     el,
                    //     e
                    // });
                    __drag__.start({
                        id,
                        otherIds,
                        e
                    });
                }
            }

            el.ondblclick = e=>{
                e.stopPropagation();
                e.preventDefault();

                let id = el.parentNode.getAttribute('id');
                // 绑定自定义事件
                __customEvent__.set({
                    type:"nodeDblclick",
                    data:{
                        id
                    }
                });
            }
        }

        function fn_automatic(id){
            __automatic__.cancelDirectionLine();

            __automatic__.endId = id;
            __automatic__.contect({
                canvas  : document.getElementById('automaticConnection')
            });

            // 绑定自定义事件
            __customEvent__.set({
                type:"contactLineEvt",
                data:{
                    startId     : __automatic__.startId,
                    endId       : __automatic__.endId,
                }
            });

            // 绑定自定义事件
            __customEvent__.set({
                type:"contactLineEvtCntMenu",
                data:{
                    startId     : __automatic__.startId,
                    endId       : __automatic__.endId,
                }
            });
        }
    }
}

let node = new nodeClass();
export default node;